<template>
  <div class="language-manage">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>多语言管理</h3>
        </div>
      </template>

      <el-tabs v-model="activeTab" class="language-tabs">
        <!-- 语言设置Tab -->
        <el-tab-pane label="语言设置" name="languages">
          <div class="language-settings">
            <el-table :data="languages" style="width: 100%">
              <el-table-column prop="name" label="语言名称" width="150">
                <template #default="scope">
                  <div class="language-info">
                    <span class="flag">{{ scope.row.flag }}</span>
                    <span>{{ scope.row.name }}</span>
                    <span class="code">({{ scope.row.code }})</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="enabled" label="状态" width="100">
                <template #default="scope">
                  <el-switch 
                    v-model="scope.row.enabled" 
                    @change="toggleLanguage(scope.row)"
                    active-text="启用"
                    inactive-text="禁用"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="isDefault" label="默认语言" width="120">
                <template #default="scope">
                  <el-radio 
                    v-model="defaultLanguage" 
                    :label="scope.row.code"
                    @change="setDefaultLanguage(scope.row)"
                    :disabled="!scope.row.enabled"
                  >
                    设为默认
                  </el-radio>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template #default="scope">
                  <el-button 
                    @click="editLanguage(scope.row)" 
                    type="primary" 
                    size="small"
                    :disabled="!scope.row.enabled"
                  >
                    编辑
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <!-- 翻译管理Tab -->
        <el-tab-pane label="翻译管理" name="translations">
          <div class="translation-management">
            <!-- 搜索和操作栏 -->
            <div class="translation-toolbar">
              <div class="search-section">
                <el-input 
                  v-model="searchKey" 
                  placeholder="搜索翻译键或描述" 
                  style="width: 300px;"
                  clearable
                  class="search-input"
                >
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
                <span class="search-tip">支持模糊搜索翻译键和描述</span>
              </div>
              <div class="action-section">
                <el-button @click="addTranslation" type="primary" size="small">
                  <el-icon><Plus /></el-icon>
                  新增翻译
                </el-button>
                <el-button @click="exportTranslations" type="success" size="small" plain>
                  <el-icon><Download /></el-icon>
                  导出
                </el-button>
                <el-button @click="downloadTemplate" type="info" size="small" plain>
                  <el-icon><Download /></el-icon>
                  下载模板
                </el-button>
                <el-button @click="importTranslations" type="warning" size="small" plain>
                  <el-icon><Upload /></el-icon>
                  导入
                </el-button>
              </div>
            </div>

            <!-- 翻译表格 -->
            <el-table 
              :data="filteredTranslations" 
              style="width: 100%; margin-top: 16px;"
              border
              stripe
              highlight-current-row
              :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: '600' }"
            >
              <el-table-column prop="key" label="翻译键" width="180" fixed="left">
                <template #default="scope">
                  <div class="translation-key-cell">
                    <el-tag type="info" size="small" class="key-tag">{{ scope.row.key }}</el-tag>
                    <div class="key-description">{{ getKeyDescription(scope.row.key) }}</div>
                  </div>
                </template>
              </el-table-column>
              
              <el-table-column 
                v-for="lang in enabledLanguages" 
                :key="lang.code"
                :label="lang.name" 
                :prop="`values.${lang.code}`"
                width="220"
                align="center"
              >
                <template #header>
                  <div class="language-header">
                    <span class="flag">{{ lang.flag }}</span>
                    <span class="lang-name">{{ lang.name }}</span>
                  </div>
                </template>
                <template #default="scope">
                  <div class="translation-cell">
                    <div class="translation-content">
                      <span class="translation-text" :class="{ 'empty': !scope.row.values[lang.code] }">
                        {{ scope.row.values[lang.code] || '未翻译' }}
                      </span>
                    </div>
                    <div class="translation-actions">
                      <el-button 
                        @click="editTranslation(scope.row, lang.code)" 
                        type="primary" 
                        size="small"
                        :icon="EditPen"
                        circle
                        class="edit-btn"
                      />
                    </div>
                  </div>
                </template>
              </el-table-column>
              
              <el-table-column label="操作" width="150" fixed="right" align="center">
                <template #default="scope">
                  <div class="action-buttons">
                    <el-button 
                      @click="editTranslation(scope.row)" 
                      type="primary" 
                      size="small"
                      :icon="EditPen"
                    >
                      编辑
                    </el-button>
                    <el-button 
                      @click="deleteTranslation(scope.row)" 
                      type="danger" 
                      size="small"
                      :icon="Delete"
                    >
                      删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 语言编辑弹窗 -->
    <el-dialog v-model="languageDialog.visible" :title="languageDialog.mode === 'add' ? '新增语言' : '编辑语言'" width="500px">
      <el-form :model="languageDialog.form" label-width="100px">
        <el-form-item label="语言代码" required>
          <el-input v-model="languageDialog.form.code" placeholder="如: zh, en, ja" />
        </el-form-item>
        <el-form-item label="语言名称" required>
          <el-input v-model="languageDialog.form.name" placeholder="如: 中文, English, 日本語" />
        </el-form-item>
        <el-form-item label="国旗图标">
          <el-input v-model="languageDialog.form.flag" placeholder="如: 🇨🇳, 🇺🇸, 🇯🇵" />
        </el-form-item>
        <el-form-item label="启用状态">
          <el-switch v-model="languageDialog.form.enabled" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="languageDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="saveLanguage">保存</el-button>
      </template>
    </el-dialog>

    <!-- 翻译编辑弹窗 -->
    <el-dialog v-model="translationDialog.visible" :title="translationDialog.mode === 'add' ? '新增翻译' : '编辑翻译'" width="800px">
      <el-form :model="translationDialog.form" label-width="100px">
        <el-form-item label="翻译键" required>
          <el-input v-model="translationDialog.form.key" placeholder="如: submit, cancel, save" />
        </el-form-item>
        <el-form-item label="中文描述">
          <el-input 
            v-model="translationDialog.form.description" 
            placeholder="请输入该翻译键的中文描述，如：提交按钮、取消按钮等"
            type="textarea"
            :rows="2"
          />
        </el-form-item>
        <el-form-item 
          v-for="lang in enabledLanguages" 
          :key="lang.code"
          :label="lang.name" 
          required
        >
          <el-input 
            v-model="translationDialog.form.values[lang.code]" 
            :placeholder="`请输入${lang.name}翻译`"
            type="textarea"
            :rows="2"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="translationDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="saveTranslation">保存</el-button>
      </template>
    </el-dialog>

    <!-- 导入翻译弹窗 -->
    <el-dialog v-model="importDialog.visible" title="导入翻译" width="400px">
      <el-upload
        class="upload-demo"
        drag
        :show-file-list="false"
        :before-upload="beforeImportUpload"
        accept=".xlsx,.xls"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 xlsx/xls 文件，且不超过 10MB
          </div>
        </template>
      </el-upload>
      <template #footer>
        <el-button @click="importDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="confirmImport">确认导入</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as XLSX from 'xlsx'
import { 
  Download, 
  Upload, 
  Search, 
  Plus, 
  EditPen,
  Delete,
  UploadFilled
} from '@element-plus/icons-vue'

// 当前激活的Tab
const activeTab = ref('languages')

// 搜索关键词
const searchKey = ref('')

// 语言数据
const languages = ref([
  { code: 'zh', name: '中文', flag: '🇨🇳', enabled: true, isDefault: true },
  { code: 'en', name: 'English', flag: '🇺🇸', enabled: true, isDefault: false },
  { code: 'ja', name: '日本語', flag: '🇯🇵', enabled: true, isDefault: false },
  { code: 'th', name: 'ไทย', flag: '🇹🇭', enabled: true, isDefault: false },
  { code: 'ko', name: '한국어', flag: '🇰🇷', enabled: false, isDefault: false },
  { code: 'vi', name: 'Tiếng Việt', flag: '🇻🇳', enabled: false, isDefault: false }
])

// 默认语言
const defaultLanguage = ref('zh')

// 翻译数据
const translations = ref([
  {
    key: 'submit',
    description: '提交按钮',
    values: {
      zh: '提交',
      en: 'Submit',
      ja: '送信',
      th: 'ส่ง'
    }
  },
  {
    key: 'cancel',
    description: '取消按钮',
    values: {
      zh: '取消',
      en: 'Cancel',
      ja: 'キャンセル',
      th: 'ยกเลิก'
    }
  },
  {
    key: 'save',
    description: '保存按钮',
    values: {
      zh: '保存',
      en: 'Save',
      ja: '保存',
      th: 'บันทึก'
    }
  },
  {
    key: 'delete',
    description: '删除按钮',
    values: {
      zh: '删除',
      en: 'Delete',
      ja: '削除',
      th: 'ลบ'
    }
  },
  {
    key: 'edit',
    description: '编辑按钮',
    values: {
      zh: '编辑',
      en: 'Edit',
      ja: '編集',
      th: 'แก้ไข'
    }
  },
  {
    key: 'add',
    description: '新增按钮',
    values: {
      zh: '新增',
      en: 'Add',
      ja: '追加',
      th: 'เพิ่ม'
    }
  },
  {
    key: 'search',
    description: '搜索按钮',
    values: {
      zh: '搜索',
      en: 'Search',
      ja: '検索',
      th: 'ค้นหา'
    }
  },
  {
    key: 'confirm',
    description: '确认按钮',
    values: {
      zh: '确认',
      en: 'Confirm',
      ja: '確認',
      th: 'ยืนยัน'
    }
  }
])

// 启用的语言
const enabledLanguages = computed(() => {
  return languages.value.filter(lang => lang.enabled)
})

// 过滤后的翻译
const filteredTranslations = computed(() => {
  if (!searchKey.value) return translations.value
  return translations.value.filter(item => 
    item.key.toLowerCase().includes(searchKey.value.toLowerCase()) ||
    (item.description && item.description.toLowerCase().includes(searchKey.value.toLowerCase()))
  )
})

// 获取翻译键的描述
const getKeyDescription = (key: string) => {
  // 先从翻译数据中查找描述
  const translation = translations.value.find(item => item.key === key)
  if (translation && translation.description) {
    return translation.description
  }
  
  // 如果没有找到，使用默认描述
  const defaultDescriptions: Record<string, string> = {
    'submit': '提交按钮',
    'cancel': '取消按钮',
    'save': '保存按钮',
    'delete': '删除按钮',
    'edit': '编辑按钮',
    'add': '新增按钮',
    'search': '搜索按钮',
    'confirm': '确认按钮',
    'back': '返回按钮',
    'next': '下一步按钮',
    'previous': '上一步按钮',
    'close': '关闭按钮',
    'ok': '确定按钮',
    'yes': '是',
    'no': '否',
    'loading': '加载中',
    'error': '错误提示',
    'success': '成功提示',
    'warning': '警告提示',
    'info': '信息提示'
  }
  return defaultDescriptions[key] || '通用文本'
}

// 语言编辑弹窗
const languageDialog = ref({
  visible: false,
  mode: 'add' as 'add' | 'edit',
  form: {
    code: '',
    name: '',
    flag: '',
    enabled: true
  }
})

// 翻译编辑弹窗
const translationDialog = ref({
  visible: false,
  mode: 'add' as 'add' | 'edit',
  form: {
    key: '',
    description: '',
    values: {} as Record<string, string>
  }
})

// 导入弹窗
const importDialog = ref({
  visible: false,
  file: null as File | null
})

// 切换语言状态
const toggleLanguage = (language: any) => {
  if (!language.enabled && language.isDefault) {
    ElMessage.warning('不能禁用默认语言')
    language.enabled = true
    return
  }
  ElMessage.success(`${language.name}已${language.enabled ? '启用' : '禁用'}`)
}

// 设置默认语言
const setDefaultLanguage = (language: any) => {
  languages.value.forEach(lang => {
    lang.isDefault = lang.code === language.code
  })
  defaultLanguage.value = language.code
  ElMessage.success(`已将${language.name}设为默认语言`)
}

// 编辑语言
const editLanguage = (language: any) => {
  languageDialog.value.mode = 'edit'
  languageDialog.value.form = { ...language }
  languageDialog.value.visible = true
}

// 保存语言
const saveLanguage = () => {
  const { form } = languageDialog.value
  if (!form.code || !form.name) {
    ElMessage.error('请填写完整信息')
    return
  }
  
  if (languageDialog.value.mode === 'add') {
    languages.value.push({ ...form, isDefault: false })
    ElMessage.success('语言添加成功')
  } else {
    const index = languages.value.findIndex(lang => lang.code === form.code)
    if (index !== -1) {
      languages.value[index] = { ...languages.value[index], ...form }
      ElMessage.success('语言更新成功')
    }
  }
  languageDialog.value.visible = false
}

// 新增翻译
const addTranslation = () => {
  translationDialog.value.mode = 'add'
  translationDialog.value.form = {
    key: '',
    description: '',
    values: {}
  }
  // 初始化各语言的空值
  enabledLanguages.value.forEach(lang => {
    translationDialog.value.form.values[lang.code] = ''
  })
  translationDialog.value.visible = true
}

// 编辑翻译
const editTranslation = (translation: any, langCode?: string) => {
  translationDialog.value.mode = 'edit'
  translationDialog.value.form = {
    key: translation.key,
    description: translation.description || '',
    values: { ...translation.values }
  }
  translationDialog.value.visible = true
}

// 保存翻译
const saveTranslation = () => {
  const { form } = translationDialog.value
  if (!form.key) {
    ElMessage.error('请输入翻译键')
    return
  }
  
  // 检查是否至少有一个翻译
  const hasTranslation = enabledLanguages.value.some(lang => 
    form.values[lang.code] && form.values[lang.code].trim()
  )
  if (!hasTranslation) {
    ElMessage.error('请至少输入一个语言的翻译')
    return
  }
  
  if (translationDialog.value.mode === 'add') {
    translations.value.push({ ...form })
    ElMessage.success('翻译添加成功')
  } else {
    const index = translations.value.findIndex(item => item.key === form.key)
    if (index !== -1) {
      translations.value[index] = { ...form }
      ElMessage.success('翻译更新成功')
    }
  }
  translationDialog.value.visible = false
}

// 删除翻译
const deleteTranslation = async (translation: any) => {
  try {
    await ElMessageBox.confirm(`确定要删除翻译键"${translation.key}"吗？`, '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const index = translations.value.findIndex(item => item.key === translation.key)
    if (index !== -1) {
      translations.value.splice(index, 1)
      ElMessage.success('翻译删除成功')
    }
  } catch {
    // 用户取消
  }
}

// 下载导入模板
const downloadTemplate = () => {
  try {
    // 创建模板数据
    const templateData = [
      {
        '翻译键': 'submit',
        '中文描述': '提交按钮',
        '中文': '提交',
        'English': 'Submit',
        '日本語': '送信',
        'ไทย': 'ส่ง'
      },
      {
        '翻译键': 'cancel',
        '中文描述': '取消按钮',
        '中文': '取消',
        'English': 'Cancel',
        '日本語': 'キャンセル',
        'ไทย': 'ยกเลิก'
      }
    ]
    
    // 创建工作簿
    const workbook = XLSX.utils.book_new()
    
    // 创建工作表
    const worksheet = XLSX.utils.json_to_sheet(templateData)
    
    // 设置列宽
    const colWidths = [
      { wch: 15 }, // 翻译键
      { wch: 20 }, // 中文描述
      ...enabledLanguages.value.map(() => ({ wch: 25 })) // 各语言列
    ]
    worksheet['!cols'] = colWidths
    
    // 设置表头样式
    const headerStyle = {
      font: { bold: true, color: { rgb: 'FFFFFF' } },
      fill: { fgColor: { rgb: '4472C4' } },
      alignment: { horizontal: 'center', vertical: 'center' }
    }
    
    // 应用表头样式
    const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1')
    for (let col = range.s.c; col <= range.e.c; col++) {
      const cellAddress = XLSX.utils.encode_cell({ r: 0, c: col })
      if (worksheet[cellAddress]) {
        worksheet[cellAddress].s = headerStyle
      }
    }
    
    // 添加工作表到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, '导入模板')
    
    // 下载文件
    XLSX.writeFile(workbook, '多语言翻译导入模板.xlsx')
    
    ElMessage.success('模板下载成功')
  } catch (error) {
    console.error('模板下载失败:', error)
    ElMessage.error('模板下载失败，请重试')
  }
}

// 导出翻译
const exportTranslations = () => {
  if (translations.value.length === 0) {
    ElMessage.warning('暂无翻译数据可导出')
    return
  }
  
  try {
    // 准备导出数据
    const exportData = translations.value.map(item => {
      const row: any = {
        '翻译键': item.key,
        '中文描述': item.description || '-'
      }
      
      // 添加各语言的翻译
      enabledLanguages.value.forEach(lang => {
        const value = item.values[lang.code]
        row[lang.name] = value && value.trim() ? value : '未翻译'
      })
      
      return row
    })
    
    // 创建工作簿
    const workbook = XLSX.utils.book_new()
    
    // 创建工作表
    const worksheet = XLSX.utils.json_to_sheet(exportData)
    
    // 设置列宽
    const colWidths = [
      { wch: 15 }, // 翻译键
      { wch: 20 }, // 中文描述
      ...enabledLanguages.value.map(() => ({ wch: 25 })) // 各语言列
    ]
    worksheet['!cols'] = colWidths
    
    // 设置表头样式
    const headerStyle = {
      font: { bold: true, color: { rgb: 'FFFFFF' } },
      fill: { fgColor: { rgb: '4472C4' } },
      alignment: { horizontal: 'center', vertical: 'center' }
    }
    
    // 应用表头样式
    const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1')
    for (let col = range.s.c; col <= range.e.c; col++) {
      const cellAddress = XLSX.utils.encode_cell({ r: 0, c: col })
      if (worksheet[cellAddress]) {
        worksheet[cellAddress].s = headerStyle
      }
    }
    
    // 添加工作表到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, '多语言翻译')
    
    // 生成文件名
    const now = new Date()
    const timestamp = `${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}_${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}`
    const fileName = `多语言翻译_${timestamp}.xlsx`
    
    // 下载文件
    XLSX.writeFile(workbook, fileName)
    
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败，请重试')
  }
}

// 导入翻译
const importTranslations = () => {
  importDialog.value.visible = true
}

// 上传前检查
const beforeImportUpload = (file: File) => {
  importDialog.value.file = file
  return false // 阻止自动上传
}

// 确认导入
const confirmImport = async () => {
  if (!importDialog.value.file) {
    ElMessage.error('请选择要导入的文件')
    return
  }
  
  try {
    ElMessage.info('正在解析导入文件...')
    
    const reader = new FileReader()
    reader.onload = (e) => {
      try {
        const data = new Uint8Array(e.target?.result as ArrayBuffer)
        const workbook = XLSX.read(data, { type: 'array' })
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        
        if (jsonData.length < 2) {
          ElMessage.error('文件格式不正确，至少需要包含表头和数据行')
          return
        }
        
        // 解析表头
        const headers = jsonData[0] as string[]
        const keyIndex = headers.findIndex(h => h === '翻译键')
        const descIndex = headers.findIndex(h => h === '中文描述')
        
        if (keyIndex === -1) {
          ElMessage.error('文件必须包含"翻译键"列')
          return
        }
        
        // 解析数据行
        const importedTranslations = []
        for (let i = 1; i < jsonData.length; i++) {
          const row = jsonData[i] as any[]
          if (row.length === 0 || !row[keyIndex]) continue
          
          const translation: any = {
            key: row[keyIndex],
            description: row[descIndex] || '',
            values: {}
          }
          
          // 解析各语言翻译
          enabledLanguages.value.forEach(lang => {
            const langIndex = headers.findIndex(h => h === lang.name)
            if (langIndex !== -1 && row[langIndex]) {
              const value = row[langIndex]
              if (value && value !== '未翻译' && value !== '-') {
                translation.values[lang.code] = value
              }
            }
          })
          
          importedTranslations.push(translation)
        }
        
        if (importedTranslations.length === 0) {
          ElMessage.warning('文件中没有找到有效的翻译数据')
          return
        }
        
        // 合并导入的数据
        importedTranslations.forEach(imported => {
          const existingIndex = translations.value.findIndex(t => t.key === imported.key)
          if (existingIndex !== -1) {
            // 更新现有翻译
            translations.value[existingIndex] = {
              ...translations.value[existingIndex],
              ...imported,
              values: { ...translations.value[existingIndex].values, ...imported.values }
            }
          } else {
            // 添加新翻译
            translations.value.push(imported)
          }
        })
        
        ElMessage.success(`成功导入 ${importedTranslations.length} 条翻译数据`)
        importDialog.value.visible = false
        importDialog.value.file = null
        
      } catch (error) {
        console.error('解析文件失败:', error)
        ElMessage.error('文件解析失败，请检查文件格式')
      }
    }
    
    reader.readAsArrayBuffer(importDialog.value.file)
    
  } catch (error) {
    console.error('导入失败:', error)
    ElMessage.error('导入失败，请重试')
  }
}

onMounted(() => {
  // 初始化默认语言
  defaultLanguage.value = languages.value.find(lang => lang.isDefault)?.code || 'zh'
})
</script>

<style scoped>
.language-manage {
  padding: 16px;
}

.page-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.language-tabs {
  margin-top: 16px;
}

.language-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flag {
  font-size: 16px;
}

.code {
  color: #909399;
  font-size: 12px;
}

.translation-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.search-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-input {
  border-radius: 6px;
}

.search-tip {
  font-size: 12px;
  color: #909399;
}

.action-section {
  display: flex;
  gap: 12px;
  align-items: center;
}

.translation-key {
  font-weight: 500;
  color: #303133;
}

.translation-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  min-height: 60px;
}

.translation-cell:hover {
  background-color: #f5f7fa;
  border-radius: 4px;
}

.translation-text {
  flex: 1;
  word-break: break-word;
  line-height: 1.4;
}

.translation-text.empty {
  color: #c0c4cc;
  font-style: italic;
}

.translation-key-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.key-tag {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
}

.key-description {
  font-size: 12px;
  color: #909399;
  line-height: 1.2;
}

.language-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.flag {
  font-size: 16px;
}

.lang-name {
  font-size: 12px;
  font-weight: 500;
}

.translation-content {
  margin-bottom: 8px;
  min-height: 20px;
}

.translation-actions {
  display: flex;
  justify-content: center;
}

.edit-btn {
  width: 28px;
  height: 28px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.upload-demo {
  text-align: center;
}

.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}
</style>
